<script setup lang="ts">
import { useAppStore } from '@/store/modules/app';
import { storeToRefs } from 'pinia';
import { onMounted, ref, unref, watch } from 'vue';

const { title, layout, collapse } = storeToRefs(useAppStore());
const showTitleText = ref(true);

onMounted(() => {
  if (unref(collapse)) {
    showTitleText.value = false;
  }
});

watch(
  () => collapse.value,
  (newVal) => {
    if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
      showTitleText.value = true;
    }

    showTitleText.value = !newVal;
  }
);

watch(
  () => layout.value,
  (newVal) => {
    if (newVal === 'top' || newVal === 'cutMenu') {
      showTitleText.value = false;
    } else {
      showTitleText.value = !unref(collapse);
    }
  }
);
</script>
<template>
  <div>
    <RouterLink to="/" :class="['flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative no-underline overflow-hidden']">
      <img src="@/assets/vue.svg" alt="" class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]" />
      <div
        v-if="showTitleText"
        :class="[
          'ml-10px text-32px font-700',
          {
            'text-[var(--logo-title-text-color)]': layout === 'classic',
            'text-[var(--top-header-text-color)]': layout !== 'classic'
          }
        ]"
        >{{ title }}</div
      >
    </RouterLink>
  </div>
</template>
